<template>
  <div class="tree-grid-toolbar common-toolbar" ref="toolbar">
    <Dropdown
      v-show="!showBtns"
      class="tools-drop"
      placement="bottom-start"
      @on-click="handleToolDropClick"
    >
      <Icon custom="wy-icon wy-Hamburg" class="directory" />
      <DropdownMenu slot="list">
        <DropdownItem name="expand_all" v-if="config.expandAll.isShow">
          <Icon custom="wy-icon wy-wenjianjia4" class="drop-icon" />
          <b>
            {{ $srv.getI18nByPath('vxe.toolbar.expandAll') }}
          </b>
        </DropdownItem>
        <DropdownItem v-if="config.contractAll.isShow" name="contract_all">
          <Icon custom="wy-icon wy-wenjianjia2" class="drop-icon" />
          <b>
            {{ $srv.getI18nByPath('vxe.toolbar.contractAll') }}
          </b>
        </DropdownItem>
        <DropdownItem v-if="config.selectMode.isShow" name="selectMode">
          <Icon
            :custom="
              config.selectMode.value
                ? 'wy-icon wy-dagou'
                : 'wy-icon wy-selected'
            "
            class="drop-icon"
          />
          <span>
            <!-- {{ config.selectMode.value ? "单选" : "多选" }} -->
            {{
              config.selectMode.value
                ? $srv.getI18nByPath('oTreeGrid.TreeGridToolbar.singlechoice')
                : $srv.getI18nByPath('oTreeGrid.TreeGridToolbar.multiplechoice')
            }}
          </span>
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <div class="grid-toolbar-left" ref="barLeft" v-show="showBtns">
      <!-- expand -->
      <o-tool-button
        v-if="config.expandAll.isShow"
        type="button"
        @on-click="$emit('commitEvent', 'expand_all')"
        icon="wy-icon wy-wenjianjia4"
        :title="$srv.getI18nByPath('vxe.toolbar.expandAll')"
        :showtitle="showText"
      >
      </o-tool-button>
      <!-- contract -->
      <o-tool-button
        v-if="config.contractAll.isShow"
        type="button"
        @on-click="$emit('commitEvent', 'contract_all')"
        icon="wy-icon wy-wenjianjia2"
        :title="$srv.getI18nByPath('vxe.toolbar.contractAll')"
        :showtitle="showText"
      >
      </o-tool-button>

      <o-tool-button
        v-if="config.selectMode"
        type="switch"
        v-model="config.selectMode.value"
        :switchlist="[
          {
            title: $srv.getI18nByPath('oTreeGrid.TreeGridToolbar.singlechoice'),
            value: true,
            icon: 'wy-icon wy-dagou'
          },
          {
            title: $srv.getI18nByPath(
              'oTreeGrid.TreeGridToolbar.multiplechoice'
            ),
            value: false,
            icon: 'wy-icon wy-selected'
          }
        ]"
        :showtitle="showText"
        @on-click="mutiSelectSwitch"
      >
      </o-tool-button>
    </div>
    <div class="grid-toolbar-right" ref="barRight" v-show="showBtns">
      <!-- 搜索 -->
      <!-- :placeholder="$srv.getI18nByPath('vxe.toolbar.globalSearch')" -->
      <Input
        search
        class="search"
        size="small"
        :placeholder="$srv.getI18nByValue('搜索')"
        v-model="globalSearchValue"
        @on-search="globalSearch"
        @on-change="globalSeachValChange"
        name="global"
      />
      <o-tool-button
        type="button"
        @on-click="$emit('commitEvent', 'reload')"
        icon="wy-icon wy-shuaxin13"
        :title="$srv.getI18nByPath('vxe.toolbar.refresh')"
        :showtitle="showText"
      >
      </o-tool-button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Tsrv } from '@/services';

@Component
export default class TreeGridToolbar extends Vue {
  /**
   * props
   */
  @Prop({
    required: true,
    default: () => {
      return {};
    }
  })
  config!: any;

  private showText: boolean = true;

  private showBtns: boolean = true;

  private fullLeft: number = 0;

  private fullRight: number = 0;

  private miniLeft: number = 0;

  private miniRight: number = 0;

  private toolbar: HTMLElement | null = null;

  private left: HTMLElement | null = null;

  private right: HTMLElement | null = null;

  private isFirst = true;

  public globalSearchValue: string = '';

  mounted() {
    setTimeout(() => {
      const erd = this.$elementDetecter();

      this.toolbar = this.$refs.toolbar as HTMLElement;
      this.left = this.$refs.barLeft as HTMLElement;
      this.right = this.$refs.barRight as HTMLElement;
      this.fullLeft = this.getWidth(this.left);
      this.fullRight = this.getWidth(this.right);
      this.miniLeft = 0;
      this.miniRight = 0;

      this.reframe(this.toolbar);
      erd.listenTo(this.toolbar, (el: any) => {
        this.reframe(el);
      });
    }, 0);
  }

  private reframe(el: any) {
    const that = this;
    if (el.offsetWidth > this.fullLeft + this.fullRight + 30) {
      that.showText = true;
      that.showBtns = true;
    } else {
      that.showText = false;
      if (this.isFirst) {
        this.isFirst = false;
        that.$nextTick(() => {
          this.miniLeft = that.getWidth(this.left);
          this.miniRight = that.getWidth(this.right);
        });
      }
      that.showBtns = el.offsetWidth > this.miniLeft + this.miniRight + 30;
    }
  }

  public handleToolDropClick(name: string) {
    if (name === 'selectMode') {
      this.config.selectMode.value = !this.config.selectMode.value;
      this.$emit('commitEvent', name, this.config.selectMode.value);
    } else {
      this.$emit('commitEvent', name);
    }
  }

  public getWidth(el: any) {
    return Tsrv.utils.sum(el.children, (e: any) => e.offsetWidth);
  }

  public mutiSelectSwitch(e: any) {
    this.$emit('commitEvent', 'selectMode', e);
  }

  public globalSearch(e) {
    this.$emit('commitEvent', 'on-search', e);
  }

  public globalSeachValChange(e) {
    this.$emit('commitEvent', 'on-search-change', e);
  }
}
</script>
<style scoped lang="scss">
.tree-grid-toolbar {
  width: 100%;
  height: 100%;
}

.tree-grid-toolbar ::v-deep {
  .tools-drop {
    margin: 5px !important;
    padding: 8px;
    transition: var(--animation-hover);
    border-radius: 50%;
    font-weight: normal;
    &:hover {
      color: var(--default-hover-font-color);
      background-color: var(--default-comp-hover-bgColor);
    }
    b {
      font-weight: normal;
    }
    .ivu-icon-ios-arrow-forward {
      float: right;
    }
    .directory {
      &:hover:not(.disabled) {
        color: var(--treegrid-toolbar-btn-hover-font-color);
        background-color: var(--treegrid-toolbar-btn-hover-bg-color);
      }
    }
  }
  .tools-drop-drop {
    margin: 0px !important;
  }
  .drop-icon {
    margin-right: 8px;
  }
  .grid-toolbar-right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    .search {
      margin: 8px 6px;
      float: left;
      width: 100px;
    }
  }
  .grid-toolbar-left {
    position: absolute;
    left: 7px;
    top: 0;
    height: 100%;
  }
  .o-toolbutton {
    .disabled {
      // $color: var(--treegrid-toolbar-btn-fontColor);
      // color: rgba($color, 0.1);
      background-color: transparent;
    }
    .titbtn {
      &:hover:not(.disabled) {
        color: var(--treegrid-toolbar-btn-hover-font-color);
        background-color: var(--treegrid-toolbar-btn-hover-bg-color);
      }
    }
  }
}
</style>
